<script lang="ts" setup>

// ref 包装后，会返回一个 ref 对象，初始化的数据被保存在 ref 对象的 value 属性中
import {ref} from 'vue'

const totalCount=ref(10)
console.log(totalCount)
const add=()=>{
  // 修改 ref 对象的 .value 属性值，自动更新视图
  totalCount.value++
}

const subtract=()=>{
  totalCount.value--
}
</script>

<template>
<button @click="add()">+</button>
<!-- 注意：template 会直接渲染 ref 数据，【不能】写 .value -->
<span>{{ totalCount }}</span>
<button @click="subtract()">-</button>
</template>
